<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
	<!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">-->
	<!--<meta content="yes" name="apple-mobile-web-app-capable">-->
	<!--<meta content="black" name="apple-mobile-web-app-status-bar-style">-->
	<!--<meta content="telephone=no" name="format-detection">-->
	<link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
	<link rel="bookmark" href="../static/favicon.ico"/>
	<title>Monster Creator</title>
	<script type="text/javascript" src="../static/js/util.js"></script>
	<script>
        if(!localStorage.getItem('monsters')){
            window.location.href = 'draw_monster.html?id=0&create=true&timeStemp='+new Date().getTime();
        }
	</script>
	<link rel="stylesheet" href="../static/css/common.css">
	<link rel="stylesheet" href="../static/css/draw_monster1.css">



</head>
<body ontouchmove="event.preventDefault()">
<div id="wrap">
	<div id="mHead">
		<img src="../static/images/mHead.png" alt="">
	</div>
	<div id="topMenu">
		<div id="back">
			<img style="width: 50%;margin-top: 10px;margin-left: 10px;" src="../static/images/info.gif" alt="">
		</div>
		<div id="group" onclick="window.location.href='draw_monster2.html?timeStamp='+new Date().getTime();">
			<img style="width: 80px;margin-top:15px;margin-right:10px;" src="../static/images/group.png" alt="">
		</div>
	</div>
	<div id="allMonsters">
		
	</div>
</div>

</body>
<script src="../static/js/common.js"></script>
<script>



	var wrap = document.getElementById('wrap');
	var mHead = document.getElementById('mHead');
	var topMenu = document.getElementById('topMenu');
	var topMenuNumber = topMenu.getElementsByTagName('div');
	var clientH = document.documentElement.clientHeight;
    var clientW = document.documentElement.clientWidth;
    var allMonsters = document.getElementById('allMonsters');
    wrap.style.height = clientH +'px';
    wrap.style.width = clientW < clientH * 0.75 ? clientW+'px' : clientH*0.6+'px';
    mHead.style.height = clientH*0.064+'px';
    topMenu.style.height = clientH*0.082+'px';
	var monstersNum = 0;
    // for(var i=0;i<topMenuNumber.length;i++){
    //     topMenuNumber[i].style.height = topMenu.offsetHeight*0.45+'px';
    //     topMenuNumber[i].style.margin = topMenu.offsetHeight*0.25+'px ' +topMenu.offsetHeight*0.22+'px';
    // }
    // topMenuNumber[1].style.height = topMenu.offsetHeight*0.65+'px';
    // topMenuNumber[1].style.margin = topMenu.offsetHeight*0.18+'px ' +topMenu.offsetHeight*0.22+'px';

    // var monsters = [
    // 		{'image':'../static/images/monster1.png', 'loveImg': '../static/images/love.png', 'isLove': true},
    // 		{'image':'../static/images/monster2.png', 'loveImg': '../static/images/love.png', 'isLove': true},
    // 		{'image':'../static/images/monster3.png', 'loveImg': '../static/images/love.png', 'isLove': false},
    // 		{'image':'../static/images/monster4.png', 'loveImg': '../static/images/love.png', 'isLove': false},
    // 		{'image':'../static/images/monster5.png', 'loveImg': '../static/images/love.png', 'isLove': false}
    // 	];
    var allmonstersContent = '';

    //定义实体
    var musr = new Object();
    musr.name = "steven";
    musr.age = 30;

    var usr = window.encodeURIComponent(JSON.stringify(musr));
    
    //我的妖怪
    var myMonsters = {
    	"likenum":0
    }

    console.log(usr);

    var allMonstersList = localStorage.getItem('monsters');

    if(allMonstersList != null){
        console.log(allMonstersList);
//        console.log(allMonstersList);
        var monsters = JSON.parse(allMonstersList);
        monstersNum = monsters.length;
        for(var i=0;i<monstersNum;i++){
            var oneMonster = monsters[i];
            // console.log(oneMonster)
            allmonstersContent += '<div class="monsterBox">';
            if(oneMonster.cvinfo !== undefined){
                allmonstersContent += ' <div class="monster"><img src="'+oneMonster.image+'" onclick="createMonster('+i+')"></div>';
			}
			else{
                allmonstersContent += ' <div class="monster"><img src="'+oneMonster.image+'" onclick="deleteMonster('+i+')"></div>';
			}

            allmonstersContent += ' <div class="loveBox">';
            allmonstersContent += '<div class="love"><img src="../static/images/love.png"><a class="lovefont">'+myMonsters.likenum+'</a></div>';
            allmonstersContent += ' </div>';
            allmonstersContent += '</div>';
        }
        allmonstersContent += '<div class="monsterBox"><div class="monster addMonster"><img src="../static/images/addMonster.png" onclick="createMonster(monstersNum)"></div></div>';
        allMonsters.innerHTML = allmonstersContent;
        var monsterBoxes = selectByClass(allMonsters,'monsterBox');
        for(var i=0;i<monsterBoxes.length;i++){
            monsterBoxes[i].style.height = monsterBoxes[i].offsetWidth*1.2 + 'px';
        }
	}
	else{
        allmonstersContent += '<div class="monsterBox"><div class="monster addMonster"><img src="../static/images/addMonster.png" onclick="createMonster(0)"></div></div>';
        allMonsters.innerHTML = allmonstersContent;
	}
	// byId('back').addEventListener('click', function(){
	// 	window.history.back();
	// });
    function monster(image, loveImg, isLove) {
        this.image = image;
        this.loveImg = loveImg;
		this.isLove = isLove;
    }
    function deleteMonster(index) {
        if(confirm("图像信息缺失，是否删除？")){
            allMonstersList.splice(index,1);
            localStorage.setItem('monsters', JSON.stringify(allMonstersList));
            window.location.reload();
		}
    }

    var createMonster = function (index) {
        window.location.href='draw_monster.html?id='+index+'&usr='+usr+'&timeStamp='+new Date().getTime();
    }
</script>
</html>